<template>
  <div>
    <!--    面包屑导航区-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>积分管理</el-breadcrumb-item>
      <el-breadcrumb-item>积分明细信息</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="container">
      <div class="card card-hero">
        <div class="card-header" style="border-radius: 3px;box-shadow: 0 2px 6px #acb5f6;border: none;">
          <div class="card-icon">
            <i class="fas fa-yen-sign "></i>
          </div>
          <h4>{{point}}</h4>
          <div class="card-description">账号当前可用积分</div>

        </div>
      </div>

      <div class="card">
        <div class="card-header">
          <h4>积分记录</h4>
        </div>

        <div class="card-body">
          <el-table
            :data="detailList"
            :row-class-name="tableRowClassName"
            border
            style="width: 100%">
            <el-table-column type="index"  align="center"></el-table-column>

            <el-table-column
              prop="score"
              label="积分值"
              align="center"
              >
            </el-table-column>
            <el-table-column
              prop="scoreDetail"
              align="center"
              label="积分获得来源">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="积分获得时间"
              align="center"
             >
            </el-table-column>

          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 5, 10]"
            :page-size="queryDetailsParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="detailTotal">
          </el-pagination>
        </div>

      </div>

      <div class="card">
        <div class="card-header">
          <h4>兑换记录</h4>
        </div>

        <div class="card-body">
          <el-table
            :data="exchangeLogList"
            :row-class-name="tableRowClassName"
            border
            stripe
            style="width: 100%">
            <el-table-column type="index"  align="center"></el-table-column>
            <el-table-column
              prop="goodsName"
              label="兑换商品名称"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="goodsPoint"
              align="center"
              label="兑换商品消耗积分">
            </el-table-column>
            <el-table-column
              prop="receiveFlag"
              label="是否领取"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.receiveFlag == '0'" >未领取</el-tag>
                <el-tag v-if="scope.row.receiveFlag == '1'" type="success">已领取</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="兑换商品时间"
              align="center"
            >
            </el-table-column>

          </el-table>

          <el-pagination
            @size-change="handleSizeChangeLog"
            @current-change="handleCurrentChangeLog"
            :current-page="currentPageLog"
            :page-sizes="[1, 5, 10]"
            :page-size="queryDetailsParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="exchangeTotal">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>

</template>
<style scoped>

.card {
  box-shadow: 0 4px 8px rgba(0,0,0,.03);
  background-color: #fff;
  border-radius: 3px;
  border: none;
  position: relative;
  margin-bottom: 30px;
}
.container{
  padding: 40px 20px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
}
.card.card-hero .card-header {
  padding: 20px;
  background-image: linear-gradient(to bottom,#6777ef,#95a0f4);
  color: #fff;
  overflow: hidden;
  height: auto;
  min-height: auto;
  display: block;
}
.card .card-header {
  border-bottom-color: #f9f9f9;
  line-height: 30px;
  -ms-grid-row-align: center;
  min-height: 70px;
  padding: 15px 25px;
  display: flex;
  align-items: center;
}
.card.card-hero .card-header .card-icon {
  float: right;
  color: #8c98f3;
  margin: -60px;
}
.card-hero .card-header h4 {
  font-size: 40px;
  line-height: 1;
  color: #fff;
  margin-top: 30px;
}
.fa-yen-sign:before {
  content: "\f157";
}
.card.card-hero .card-header .card-description {
  margin-top: 5px;
  font-size: 16px;
}
.mt-4, .my-4 {
  margin-top: 1.5rem!important;
}
.card .card-header h4 {
  font-size: 16px;
  line-height: 28px;
  color: #6777ef;
  padding-right: 10px;
  margin-bottom: 0;
  font-weight: 700;
  font-family: inherit;
}
.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card.card-hero .card-header h4 {
  font-size: 40px;
  line-height: 1;
  color: #fff;
}
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.25rem;
}
.card .card-header, .card .card-body, .card .card-footer {
  background-color: transparent;
  padding: 0px 25px;
}
.card .card-body {
  padding-top: 0px;
  padding-bottom: 20px;
}

</style>
<script>
import { getUserPoint, getUserPointDetail, getUserExchangeLog } from '@/api/point'
export default {
  name: 'ExchangePoint',
  data () { // 选项 / 数据
    return {
      queryDetailsParams: {
        pageNum: 1,
        pageSize: 10
      },
      getUserExchangeParams: {
        pageNum: 1,
        pageSize: 10
      },
      detailTotal: 0,
      exchangeTotal: 0,
      point: 0,
      detailList: [],
      exchangeLogList: [],
      currentPage: 1,
      currentPageLog: 1
    }
  },
  methods: {
    routeChange: function () { // 展示页面信息
      const that = this
      getUserPoint().then((response) => {
        that.point = response
      }).catch(() => { })
      getUserPointDetail(that.queryDetailsParams).then((response) => {
        that.detailList = response.rows
        that.detailTotal = response.total
      }).catch(() => { })
      getUserExchangeLog(that.getUserExchangeParams).then((response) => {
        that.exchangeLogList = response.list
        that.exchangeTotal = response.total
      }).catch(() => { })
    },
    tableRowClassName: function ({ row, rowIndex }) {
      console.log(row)
      if (row.type == '1') {
        return 'sub-row'
      }
    },
    // 监听pagesize改变的事件
    handleSizeChange (newSize) {
      const that = this
      that.queryDetailsParams.pageSize = newSize
      getUserPointDetail(that.queryDetailsParams).then((response) => {
        that.detailList = response.rows
        that.detailTotal = response.total
      }).catch(() => { })
    },
    // 监听页码值变化
    handleCurrentChange (newPage) {
      const that = this
      that.queryDetailsParams.pageNum = newPage
      getUserPointDetail(that.queryDetailsParams).then((response) => {
        that.detailList = response.rows
        that.detailTotal = response.total
      }).catch(() => { })
    },
    handleSizeChangeLog (newSize) {
      const that = this
      that.getUserExchangeParams.pageSize = newSize
      getUserExchangeLog(that.getUserExchangeParams).then((response) => {
        that.exchangeLogList = response.list
        that.exchangeTotal = response.total
      }).catch(() => { })
    },
    handleCurrentChangeLog (newPage) {
      const that = this
      that.getUserExchangeParams.pageNum = newPage
      getUserExchangeLog(that.getUserExchangeParams).then((response) => {
        that.exchangeLogList = response.list
        that.exchangeTotal = response.total
      }).catch(() => { })
    }

  },
  created () {
    this.routeChange()
  }
}
</script>
